<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="系统日志" name="systemLogs">
        <log-table :table-data="systemLogs" :columns="systemLogColumns" />
      </el-tab-pane>
      <el-tab-pane label="登录日志" name="loginLogs">
        <log-table :table-data="loginLogs" :columns="loginLogColumns" />
      </el-tab-pane>
      <el-tab-pane label="操作日志" name="operationLogs">
        <log-table :table-data="operationLogs" :columns="operationLogColumns" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElTabs, ElTabPane } from 'element-plus';
import LogTable from './components/LogTable.vue';
import requestUtil from '@/util/request';

const activeTab = ref('systemLogs');

const systemLogs = ref([]);
const loginLogs = ref([]);
const operationLogs = ref([]);

// 定义列配置
const systemLogColumns = [
  { prop: 'id', label: 'ID', width: 100 },
  { prop: 'message', label: '日志消息' },
  { prop: 'level', label: '日志级别', width: 120 },
  { prop: 'loggerName', label: '日志记录器名称' },
  { prop: 'threadName', label: '线程名称' },
  { prop: 'methodName', label: '方法名称' },
  { prop: 'className', label: '类名称' },
  { prop: 'createTime', label: '创建时间', width: 180, align: 'center' }
];

const loginLogColumns = [
  { prop: 'id', label: 'ID', width: 100 },
  { prop: 'username', label: '用户名' },
  { prop: 'ipAddress', label: '登录IP地址', width: 150 },
  { prop: 'loginTime', label: '登录时间', width: 180, align: 'center' },
  { prop: 'status', label: '登录状态', width: 120 },
  { prop: 'remark', label: '备注' },
  { prop: 'createTime', label: '创建时间', width: 180, align: 'center' },
  { prop: 'updateTime', label: '更新时间', width: 180, align: 'center' }
];

const operationLogColumns = [
  { prop: 'id', label: 'ID', width: 100 },
  { prop: 'username', label: '执行操作的用户名' },
  { prop: 'operation', label: '操作描述' },
  { prop: 'method', label: '执行的方法或API接口名称' },
  { prop: 'params', label: '调用方法时传递的参数' },
  { prop: 'result', label: '操作结果' },
  { prop: 'elapsedTime', label: '操作耗时（毫秒）', width: 150, align: 'center' },
  { prop: 'createTime', label: '创建时间', width: 180, align: 'center' },
  { prop: 'ipAddress', label: '执行操作的IP地址', width: 150 },
  { prop: 'status', label: '操作状态', width: 120 }
];

// 数据获取函数
const fetchSystemLogs = async () => {
  try {
    const response = await requestUtil.get('/systemLogs');
    systemLogs.value = response.data;
  } catch (error) {
    console.error('Error fetching system logs:', error);
  }
};

const fetchLoginLogs = async () => {
  try {
    const response = await requestUtil.get('/loginLogs');
    loginLogs.value = response.data;
  } catch (error) {
    console.error('Error fetching login logs:', error);
  }
};

const fetchOperationLogs = async () => {
  try {
    const response = await requestUtil.get('/operationLogs');
    operationLogs.value = response.data;
  } catch (error) {
    console.error('Error fetching operation logs:', error);
  }
};

// 标签页切换事件处理
const handleTabClick = async (tab) => {
  switch (tab.paneName) {
    case 'systemLogs':
      await fetchSystemLogs();
      break;
    case 'loginLogs':
      await fetchLoginLogs();
      break;
    case 'operationLogs':
      await fetchOperationLogs();
      break;
    default:
      break;
  }
};

// 组件挂载后加载默认标签页的日志数据
onMounted(() => {
  handleTabClick({ paneName: activeTab.value });
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  .el-tabs {
    width: 100%;
  }
}
</style>